<template>
  <!-- 卡片 -->
  <el-card-comon>
    <!-- 按钮 + 搜索框组件 -->
    <el-btn-serch-input
      btnTxt="添加商品"
      :queryInfo="queryInfo"
      inputContentClearEmitName="searchClear"
      searchEmitName="inputClick"
      openDialogEmitName="openAddGoodDialog"
      class="btnSearchInput"/>

    <!-- 表格组件 -->
    <good-list-table :goodsList="goodsList"></good-list-table>

    <!-- 分页组件 -->
    <el-pagination-com 
    :nowPage.sync="queryInfo.pagenum"  :pageNumber.sync="queryInfo.pagesize"
    :total="total" 
    changeSizeName="changeSize" changeSizeNumberName="changeNowPage"/>

  </el-card-comon>
</template>

<script>
// 组件
  import ElCardComon from '@/components/common/ElCardComon';
  import ElBtnSerchInput from '@/components/common/ElBtnSerchInput';
  import GoodListTable from '@/views/Main/goods_manage/goods_list/GoodListTable';
  import ElPaginationCom from '@/components/common/ElPaginationCom';

// 网络
  import { getGoodList } from '@/network/goodListRequest';

export default {
  data () {
    return {
      queryInfo: {
        query: '', // 查询参数
        pagenum: 1, // 当前页面
        pagesize: 10 // 一页显示多少条
      },
      total: 0, // 总数,
      goodsList: [], // 商品列表数组
    }
  },
  methods: {
    inputClick() { // input按钮点击
      return this.getGoodListRequest();
    },
    searchClear() { // search清除事件
      return this.getGoodListRequest();
    },
    openAddGoodDialog() { // 添加操作dialog开启事件
      this.$router.push('/goods/add');
    },
    async getGoodListRequest() { // 获取商品列表请求
      // console.log('接收');
      const {meta, data} = await getGoodList(this.queryInfo);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.total = data.total;
      return this.goodsList = data.goods;
    },
    changeNowPage() { // 分页组件第几页改变触发
      return this.getGoodListRequest();
    },
    changeSize() { // 分页组件页面多少条数据改变触发
      return this.getGoodListRequest();
    }
  },
  created() {
    this.$bus.$on('getGoodList', this.getGoodListRequest);
    this.$bus.$on('inputClick', this.inputClick);
    this.$bus.$on('searchClear', this.searchClear);
    this.$bus.$on('openAddGoodDialog', this.openAddGoodDialog);
    this.$bus.$on('changeNowPage', this.changeNowPage);
    this.$bus.$on('changeSize', this.changeSize);
    this.getGoodListRequest(); 
  },
  destroyed() {
    this.$bus.$off('getGoodList');
    this.$bus.$off('inputClick');
    this.$bus.$off('searchClear');
    this.$bus.$off('openAddGoodDialog');
    this.$bus.$off('changeNowPage');
    this.$bus.$off('changeSize');
  },
  components: {
    ElCardComon,
    ElBtnSerchInput,
    GoodListTable,
    ElPaginationCom
  }
}
</script>

<style lang="scss" scoped>
  .btnSearchInput {
    margin-bottom: 10px;
  }
</style>